<template>
  <div class="container fselect">
    <div class="tips-title"><b>Part 1. Select 选择器</b></div>
    <el-row :gutter="5">
      <div class="tips-title">1. 基础用法 / 禁用状态<span class="tips-explain">disabled</span> 有禁用选项<span class="tips-explain">:disabled=true</span> / 可清空单选<span class="tips-explain">clearable</span></div>
      <el-col :span="6">
        <el-select v-model="value1_1" placeholder="请选择">
          <el-option v-for="item in testData1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="value1_2" disabled placeholder="请选择">
          <el-option v-for="item in testData1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="value1_3" placeholder="请选择">
          <el-option v-for="item in testData1" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="value1_4" clearable placeholder="请选择">
          <el-option v-for="item in testData1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row :gutter="5">
      <div class="tips-title">2.基础多选<span class="tips-explain">multiple</span></div>
      <el-col :span="6">
        <el-select v-model="value1_5" multiple placeholder="请选择">
          <el-option v-for="item in testData1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="value1_6" multiple collapse-tags placeholder="请选择">
          <el-option v-for="item in testData1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row :gutter="5">
      <div class="tips-title">3.自定义模板 / 分组 <span class="tips-explain"></span></div>
      <el-col :span="6">
        <el-select v-model="value1_7" placeholder="请选择">
          <el-option v-for="item in testData2" :key="item.value" :label="item.label" :value="item.value">
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="value1_8" placeholder="请选择">
          <el-option-group v-for="group in testData3" :key="group.label" :label="group.label">
            <el-option v-for="item in group.items" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-option-group>
        </el-select>
      </el-col>
    </el-row>
    <div class="tips-title"><b>Part 2. Cascader 级联选择器</b></div>
    <el-row :gutter="5">
      <div class="tips-title">1.基础用法 <span class="tips-explain">click 触发子菜单 / hover 触发子菜单 + 可清空</span></div>
      <el-col :span="6">
        <el-cascader v-model="value2_1" :options="testData4" @change="handleChange"></el-cascader>
      </el-col>
      <el-col :span="6">
        <el-cascader v-model="value2_2" :options="testData4"  clearable :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
      </el-col>
    </el-row>
    <el-row :gutter="5">
      <div class="tips-title">2.动态加载 / 自定义节点内容</div>
      <el-col :span="6">
        <el-cascader :props="testProps" value="value2_3"></el-cascader>
      </el-col>
      <el-col :span="6">
        <el-cascader :options="testData4" value="value2_6">
          <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-col>
    </el-row>
    <el-row :gutter="5">
      <div class="tips-title">3.可搜索</div>
      <el-col :span="6">
        <div class="tips-title-sub">单选可搜索</div>
        <el-cascader placeholder="试试搜索：指南" :options="testData4" value="value2_4" filterable></el-cascader>
      </el-col>
      <el-col :span="6">
        <div class="tips-title-sub">多选可搜索</div>
        <el-cascader placeholder="试试搜索：指南" :options="testData4" value="value2_5"  filterable :props="{ multiple: true }"></el-cascader>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  const testData1 = [
    {value: '1',label: '黄金糕'},
    {value: '2',label: '双皮奶'},
    {value: '3',label: '蚵仔煎'},
    {value: '4',label: '龙须面', disabled: true},
    {value: '5',label: '北京烤鸭'}
  ];
  const testData2 = [
    {value: 'Beijing',label: '北京'},
    {value: 'Shanghai',label: '上海'},
    {value: 'Nanjing',label: '南京'},
    {value: 'Chengdu',label: '成都'},
    {value: 'Shenzhen',label: '深圳'},
    {value: 'Guangzhou',label: '广州'}
  ];
  const testData3 = [
    {label: '热门城市', items: [{value: 'Beijing',label: '北京'},{value: 'Shanghai',label: '上海'},{value: 'Guangzhou',label: '广州'}]},
    {label: '广东', items:[{value: 'Guangzhou',label: '广州'},{value: 'Shenzhen',label: '深圳'},{value: 'Dongguan',label: '东莞'}]}
  ];
  const testData4 = [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '设计原则',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反馈'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '导航',children: [{value: 'cexiangdaohang',label: '侧向导航'}, {value: 'dingbudaohang',label: '顶部导航'}]}]}, {value: 'zujian',label: '组件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'}, {value: 'color',label: 'Color 色彩'}, {value: 'typography',label: 'Typography 字体'}, {value: 'icon',label: 'Icon 图标'}, {value: 'button',label: 'Button 按钮'}]}, {value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 单选框'}, {value: 'checkbox',label: 'Checkbox 多选框'}, {value: 'input',label: 'Input 输入框'}, {value: 'input-number',label: 'InputNumber 计数器'}, {value: 'select',label: 'Select 选择器'}, {value: 'cascader',label: 'Cascader 级联选择器'}, {value: 'switch',label: 'Switch 开关'}, {value: 'slider',label: 'Slider 滑块'}, {value: 'time-picker',label: 'TimePicker 时间选择器'}, {value: 'date-picker',label: 'DatePicker 日期选择器'}, {value: 'datetime-picker',label: 'DateTimePicker 日期时间选择器'}, {value: 'upload',label: 'Upload 上传'}, {value: 'rate',label: 'Rate 评分'}, {value: 'form',label: 'Form 表单'}]}, {value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'}, {value: 'tag',label: 'Tag 标签'}, {value: 'progress',label: 'Progress 进度条'}, {value: 'tree',label: 'Tree 树形控件'}, {value: 'pagination',label: 'Pagination 分页'}, {value: 'badge',label: 'Badge 标记'}]}, {value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'}, {value: 'loading',label: 'Loading 加载'}, {value: 'message',label: 'Message 消息提示'}, {value: 'message-box',label: 'MessageBox 弹框'}, {value: 'notification',label: 'Notification 通知'}]}, {value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 导航菜单'}, {value: 'tabs',label: 'Tabs 标签页'}, {value: 'breadcrumb',label: 'Breadcrumb 面包屑'}, {value: 'dropdown',label: 'Dropdown 下拉菜单'}, {value: 'steps',label: 'Steps 步骤条'}]}, {value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 对话框'}, {value: 'tooltip',label: 'Tooltip 文字提示'}, {value: 'popover',label: 'Popover 弹出框'}, {value: 'card',label: 'Card 卡片'}, {value: 'carousel',label: 'Carousel 走马灯'}, {value: 'collapse',label: 'Collapse 折叠面板'}]}]}, {value: 'ziyuan',label: '资源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '组件交互文档'}]},{value:'forbidden',disabled: true,label: '禁用选择'}];

  let id = 0;

  export default {
    name: 'f-select',
    data() {
      return {
        testData1: testData1,
        value1_1: '',
        value1_2: '5',
        value1_3: '',
        value1_4: '2',
        value1_5: [],
        value1_6: [],

        testData2: testData2,
        value1_7: [],
        testData3:testData3,
        value1_8: [],

        value2_1: '',
        value2_2: '',
        testData4: testData4,
        value2_3: '',
        testProps: {
          lazy: true,
          lazyLoad (node, resolve) {
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })
                .map(item => ({
                  value: ++id,
                  label: `选项${id}`,
                  leaf: level >= 2
                }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        },

        value2_4: '',
        value2_5: '',
        value2_6: ''
      }
    },
    methods: {
      handleChange(value){
        console.log('value:',value)
      }
    }
  }
</script>
<style>
</style>

